<!-- 点赞组件 -->
<template>
  <van-tabbar-item v-if="modelValue !== 1" @click="onLike">
      <span>点赞</span>
      <template #icon>
        <van-icon name="good-job-o" />
      </template>
  </van-tabbar-item>
  <van-tabbar-item @click="onLike" v-else class="liked">
      <span>已点赞</span>
      <template #icon>
        <van-icon name="good-job" />
      </template>
  </van-tabbar-item>
</template>

<script>
import { likeArticle, notLikeArticle } from '../api/user'
export default {
  name: 'like',
  props: {
    modelValue: {
      type: Number,
      required: true
    },
    articleId: {
      type: [String, Number, Object],
      required: true
    }
  },
  data () {
    return {
    }
  },
  methods: {
    async onLike () {
      console.log(this.articleId)
      if (this.modelValue !== 1) {
        // 当前没有点赞状态,点击点赞
        await likeArticle({ target: this.articleId })
        this.$emit('update:modelValue', 1)
        this.$toast('已收到你的喜欢，谢谢！')
      } else {
        // 当前点赞状态,点击取消点赞
        await notLikeArticle(this.articleId)
        this.$emit('update:modelValue', -1)
      }
    }
  }
}
</script>

<style  scoped>

</style>
